<template>
  <div class="app-box _flex _text-a-c _font _rel _background-4">
    <div class="img">
      <el-image
        style="width: 100%; height: 100%"
        :src="$img.img(imgSrc)"
        fit="cover"
      />
    </div>
    <div class="app-text _ellipsis _flex-item-1">{{ text }}</div>
    <div class="app-coll _background-3" v-if="comData">
      <el-icon v-if="comData.is_core === '0'" @click.stop="collect('1')"
        ><Star
      /></el-icon>
      <el-icon v-if="comData.is_core === '1'" @click.stop="collect('0')"
        ><StarFilled
      /></el-icon>
    </div>
  </div>
</template>

<script>
import toolAction from "@/tool/http/tool-action";

const acctionMenu = toolAction.init("account_menu");
export default {
  props: {
    imgSrc: {
      type: String,
      default: "manager-project/brk2ldkhuyalq4qoaoh4.jpg",
    },
    text: {
      type: String,
      default: "app",
    },
    comData: {
      type: Object,
      default: () => undefined,
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 收藏
     */
    collect(is_core) {
      acctionMenu.sync({ id: this.comData.id, is_core }).then((res) => {
        this.$comStore.login.refreshRes();
      });
    },
  },
};
</script>

<style scoped>
.app-box {
  width: 140px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.img {
  width: 30px;
  height: 30px;
}
.app-text {
  padding: 0 6px;
  font-size: 14px;
  font-weight: bold;
}
.app-coll {
  height: 30px;
  line-height: 30px;
}
</style>
